<template>
    <div>
        <!--表格栏-->
        <el-table :data="data.content" :highlight-current-row="highlightCurrentRow" @selection-change="selectionChange"
                  @current-change="handleCurrentChange" v-loading="loading" :element-loading-text="$t('action.loading')"
                  :border="border" :stripe="stripe"
                  :show-overflow-tooltip="showOverflowTooltip" :max-height="maxHeight" :height="height" :size="size"
                  :align="align" style="width:100%;">
            <!--            <el-table-column type="selection" width="40" v-if="showBatchDelete & showOperation"></el-table-column>-->
            <el-table-column :width="42">
                <template slot-scope="scopes">{{scopes.$index + 1}}</template>
            </el-table-column>
            <el-table-column v-for="column in columns" header-align="center" align="center"
                             :prop="column.prop" :label="column.label" :width="column.width"
                             :min-width="column.minWidth"
                             :fixed="column.fixed" :key="column.prop" :type="column.type" :formatter="column.formatter"
                             :sortable="column.sortable==null?true:column.sortable">
            </el-table-column>
            <el-table-column :label="$t('action.operation')" width="185" fixed="right" v-if="showOperation"
                             header-align="center" align="center">
                <template slot-scope="scope">
                    <kt-button icon="fa fa-edit" :label="$t('action.edit')" :size="size"
                               @click="handleEdit(scope.$index, scope.row)"/>
                    <kt-button icon="fa fa-trash" :label="$t('action.delete')" :size="size"
                               type="danger" @click="handleDelete(scope.$index, scope.row)"/>
                </template>
            </el-table-column>
        </el-table>
        <!--分页栏-->
        <div class="toolbar" style="padding:10px;">
            <!--            <kt-button :label="$t('action.batchDelete')" :size="size" type="danger"-->
            <!--                       @click="handleBatchDelete()"-->
            <!--                       :disabled="this.selections.length===0" style="float:left;"-->
            <!--                       v-if="showBatchDelete & showOperation"/>-->
            <el-pagination background
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="data.totalSize"
                           :page-size="15"
                           :page-sizes="[15, 30, 50, 100]"
                           @size-change="resizeRequest"
                           @current-change="refreshPageRequest"
                           style="float:right;">
            </el-pagination>
        </div>
    </div>
</template>

<script>
  import KtButton from '@/components/Core/KtButton'

  export default {
    name: 'KtTable',
    components: {
      KtButton
    },
    props: {
      columns: Array, // 表格列配置
      data: Object, // 表格分页数据
      size: { // 尺寸样式
        type: String,
        default: 'mini'
      },
      align: {  // 文本对齐方式
        type: String,
        default: 'left'
      },
      maxHeight: {  // 表格最大高度
        type: Number,
        default: 620
      },
      height: {  // 行高度
        type: Number,
        default: 620
      },
      showOperation: {  // 是否显示操作组件
        type: Boolean,
        default: true
      },
      border: {  // 是否显示边框
        type: Boolean,
        default: true
      },
      stripe: {  // 是否显示斑马线
        type: Boolean,
        default: true
      },
      highlightCurrentRow: {  // 是否高亮当前行
        type: Boolean,
        default: true
      },
      showOverflowTooltip: {  // 是否单行显示
        type: Boolean,
        default: true
      },
      showBatchDelete: {  // 是否显示操作组件
        type: Boolean,
        default: true
      }
    },
    data () {
      return {
        // 分页信息
        pageRequest: {
          pageNum: 1,
          pageSize: 15
        },
        loading: false,  // 加载标识
        selections: []  // 列表选中列
      }
    },
    methods: {
      // 分页查询
      findPage: function () {
        this.loading = true
        let callback = res => {
          this.loading = false
        }
        this.$emit('findPage', {pageRequest: this.pageRequest, callback: callback})
      },
      resizeRequest: function(size){
        this.pageRequest.pageSize = size
        this.findPage()
      },
      // 选择切换
      selectionChange: function (selections) {
        this.selections = selections
        this.$emit('selectionChange', {selections: selections})
      },
      // 选择切换
      handleCurrentChange: function (val) {
        this.$emit('handleCurrentChange', {val: val})
      },
      // 换页刷新
      refreshPageRequest: function (pageNum) {
        this.pageRequest.pageNum = pageNum
        this.findPage()
      },
      // 编辑
      handleEdit: function (index, row) {
        this.$emit('handleEdit', {index: index, row: row})
      },
      // 删除
      handleDelete: function (index, row) {
        this.delete(row.unique)
      },
      // 批量删除
      handleBatchDelete: function () {
        let ids = this.selections.map(item => item.unique).toString()
        this.delete(ids)
      },
      // 删除操作
      delete: function (ids) {
        this.$confirm('确认删除选中记录吗？', '提示', {
          type: 'warning'
        }).then(() => {
          let params = {'unique': ids}
          this.loading = true
          let callback = res => {
            if (res.isSuccess) {
              this.$message({message: '删除成功', type: 'success'})
              this.findPage()
            } else {
              this.$message({message: '操作失败, ' + res.msg, type: 'error'})
            }
            this.loading = false
          }
          this.$emit('handleDelete', {params: params, callback: callback})
        }).catch(() => {
        })
      }
    },
    mounted () {
      this.refreshPageRequest(1)
    }
  }
</script>

<style scoped>

</style>
